<!--  -->
<template>
  <div class="container" @touchmove.prevent>
    <img class="logo" src="@/assets/images/ps_icon.png" alt />
    <div class="top">
      <div class="head">
        <van-image
          round
          width=".8rem"
          height=".8rem"
          :src="
            userInfo ? userInfo.headImage : require('@/assets/images/mine1.png')
          "
        >
          <template v-slot:error>{{ $t("mine.load_fail") }}</template>
        </van-image>
        <div class="right">
          <p>{{ userInfo.realName ? userInfo.realName : "暂无昵称" }}</p>
          <p class="hospital">
            所属医院：{{
              userInfo.hospitalName ? userInfo.hospitalName : "暂无填写"
            }}
          </p>
          <p class="hospital">
            科室：{{
              userInfo.departmentName ? userInfo.departmentName : "暂无填写"
            }}
          </p>
        </div>
      </div>
    </div>
    <div class="center">
      <van-divider
        content-position="left"
        :style="{
          color: '#999999',
          borderColor: '#999999',
          margin: '0',
          padding: '6px 0',
        }"
        >个人</van-divider
      >
      <div class="i-btn">
        <div class="i-box" @click="toDoctorPerson">
          <img src="@/assets/images/dmine/1.png" alt="" />
          <p>个人信息</p>
        </div>
        <div class="i-box" @click="toChangePwd">
          <img src="@/assets/images/dmine/2.png" alt="" />
          <p>修改密码</p>
        </div>
        <div class="i-box" @click="toRenzhen">
          <img src="@/assets/images/dmine/3.png" alt="" />
          <p>资质认证</p>
        </div>
      </div>
      <van-divider
        content-position="left"
        :style="{
          color: '#999999',
          borderColor: '#999999',
          margin: '0',
          padding: '6px 0',
        }"
        >科研</van-divider
      >
      <div class="i-btn">
        <div class="i-box" @click="toClass">
          <img src="@/assets/images/dmine/4.png" alt="" />
          <p>报名课程</p>
        </div>
        <div class="i-box" @click="codeing">
          <img src="@/assets/images/dmine/5.png" alt="" />
          <p>我的论文库</p>
        </div>
        <div class="i-box" @click="codeing">
          <img src="@/assets/images/dmine/6.png" alt="" />
          <p>我的收藏</p>
        </div>
      </div>
      <van-divider
        content-position="left"
        :style="{
          color: '#999999',
          borderColor: '#999999',
          margin: '0',
          padding: '6px 0',
        }"
        >其他</van-divider
      >
      <div class="i-btn">
        <div class="i-box" @click="about">
          <img src="@/assets/images/dmine/7.png" alt="" />
          <p>关于我们</p>
        </div>
        <div class="i-box" @click="logout">
          <img src="@/assets/images/dmine/8.png" alt="" />
          <p>退出登陆</p>
        </div>
      </div>
      <!-- <van-cell title="个人信息" @click="toDoctorPerson" is-link />
      <van-cell title="修改密码" is-link />
      <van-cell title="资质认证" @click="toRenzhen" is-link />
      <van-cell :title="$t('mine.contact')" @click="about" is-link />
      <van-cell title="退出登陆" @click="logout" is-link /> -->
    </div>
    <div class="b-tips"></div>
    <van-popup round v-model="aboutShow">
      <div class="about">
        <van-divider>{{ $t("mine.contact") }}</van-divider>
        <p class="text">{{ $t("mine.introduce") }}</p>
        <van-divider>{{ $t("mine.contact_information") }}</van-divider>
        <div class="contact">
          <p>
            <span class="icon icon-youxiang"></span>
            {{ $t("mine.e_mail") }}：postmaster@pushiyixue.cn
          </p>
          <p>
            <span class="icon icon-dianhua"></span>
            {{ $t("mine.phone") }}：0757-88595188
          </p>
        </div>
        <van-divider>{{ $t("mine.weChat_public_account") }}</van-divider>
        <img src="@/assets/images/gzh.jpg" class="gzh" alt />
      </div>
    </van-popup>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { Dialog } from "vant";
import { removeStorage, setStorage } from "@/utils/auth.js";
export default {
  name: "dMine",
  data() {
    return {
      aboutShow: false,
      userInfo: null,
    };
  },

  components: {},

  computed: {
    ...mapGetters(["userData"]),
  },

  created() {
    this.userInfo = this.userData ? JSON.parse(this.userData) : null;
    console.log(this.userInfo);
  },
  mounted() {},

  methods: {
    // 关于我们
    about() {
      this.aboutShow = true;
    }, // 退出登录
    logout() {
      this.$store.commit("user/SAVE_DATA", "");
      removeStorage("userInfo");
      removeStorage("userToken");
      removeStorage("doctorToken");
      removeStorage("lang");
      this.$router.replace({
        path: "/login",
      });
      location.reload();
    },
    // 认证
    toRenzhen() {
      this.$router.push({
        name: "doctorAuthentication",
      });
    },
    // 个人
    toDoctorPerson() {
      this.$router.push({
        name: "doctorPerson",
      });
    },
    // 报名课程
    toClass() {
      this.$router.push({
        name: "signClass",
      });
    },
    //修改密码
    toChangePwd() {
      this.$router.push({
        name: "doctorPassword",
      });
    },
    //
    codeing() {
      Dialog.alert({
        title: "提示",
        message: "此模块正在开发中。。",
      }).then(() => {
        // on close
      });
    }
  },
};
</script>
<style lang='scss' scoped>
.container {
  position: relative;
  height: 100vh;
  background: #f5f5f5;
  overflow: hidden;
  & .logo {
    position: absolute;
    width: 2rem;
    right: -36px;
    top: 0px;
    opacity: 0.5;
  }
  & .top {
    width: 100%;
    height: 200px;
    background: #4c63ff;
    background-image: linear-gradient(
      180deg,
      #4960ff 0%,
      #4c63ff 50%,
      #677aff 75%,
      #909fff 100%
    );
    // border-bottom-left-radius: 10px;
    // border-bottom-right-radius: 10px;
    & .head {
      display: flex;
      justify-content: flex-start;
      align-content: center;
      width: 92%;
      height: 0.8rem;
      // line-height: 0.8rem;
      margin: 0 auto;
      padding-top: 0.28rem;
      & .right {
        display: flex;
        flex-direction: column;
        // width: 40%;
        height: 0.8rem;
        margin-top: 0.1rem;
        & p {
          text-align: left;
          margin-left: 0.18rem;
          color: #fff;
          font-weight: 600;
          font-size: 0.2rem;
        }
        & .hospital {
          margin-top: 0.1rem;
          font-size: 0.12rem;
          color: #fff;
        }
      }
      & img {
        width: 0.8rem;
        height: 0.8rem;
        border-radius: 50%;
      }
    }
  }
  & .center {
    overflow: hidden;
    width: 94%;
    border-radius: 10px;
    // height: 2rem;
    padding-bottom: 0.1rem;
    background: #fff;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 1.2rem;
    & .i-btn {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      & .i-box {
        width: 33.33%;
        & img {
          width: 0.75rem;
          height: 0.47rem;
          padding: 0.1rem 0.25rem;
          box-sizing: border-box;
        }
        & p {
          font-size: 0.12rem;
          margin-bottom: 0.05rem;
        }
      }
    }
  }
  & .van-popup {
    width: 90%;
    background: #ffffff;
  }
  & .about {
    & .text {
      padding: 0 0.3rem;
      text-align: left;
      font-size: 0.16rem;
    }
    & .contact {
      & p {
        padding: 0 0.3rem;
        text-align: left;
        font-size: 0.16rem;
        margin: 5px 0;
        & span {
          margin-right: 5px;
          color: #666;
        }
      }
    }
    & .gzh {
      width: 130px;
      height: 130px;
      padding-bottom: 10px;
    }
  }
}
.van-cell__title {
  text-align: left;
}
.b-tips {
  position: absolute;
  width: 100%;
  bottom: 0.4rem;
}
.van-divider {
  padding: 0.06rem 0 0 0 !important;
}
</style>